{% extends 'base.html' %}
{% block title %}统计{% endblock %}
{% block css %}

    <!-- Theme style -->

    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->

    <link rel="stylesheet" href="../static/plugins/datatables/dataTables.bootstrap.css">

    {#    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">#}
{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            任务名 : {{ count_info['task_name'] }}
        </h1>
        <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-dashboard"></i> 主页</a></li>
            <li>统计</li>
        </ol>
    </section>

    <!-- Main content -->


    <section class="content">
        <div class="row">


            <!-- ./col -->
            <div class="col-lg-6 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>{{ count_info.ips_total }}</h3>

                        <p>IP总数</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>

                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-6 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>{{ count_info.ports_total }}</h3>

                        <p>端口总数</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>

                </div>
            </div>
            <!-- ./col -->

        </div>
        <div class="row">
            <div class="col-md-6">
                <!-- AREA CHART -->
                <div class="box box-danger">
                    <div class="box-header with-border">
                        <h3 class="box-title">端口统计</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                    class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div id="ports_pie" style="height: 323px; width: 627px;"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->


            </div>
            <!-- /.col (LEFT) -->
            <div class="col-md-6">
                <!-- LINE CHART -->
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">服务统计</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                    class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div id="service_pie" style="height: 323px; width: 627px;"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->


            </div>
            <!-- /.col (RIGHT) -->
        </div>

        <div class="row">
            <div class="col-md-12">

                <div class="box">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table class="table  table-hover"
                               style="border-left:3px solid green;border-bottom:1px solid green" id="scan_result">
                            <thead>
                            <tr>
                                <th>IP</th>
                                <th>端口</th>
                                <th>服务</th>
                                <th>软件信息</th>
                                <th>扫描时间</th>
                            </tr>
                            </thead>
                            <tbody>


                            </tbody>

                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->


            </div>
        </div>

    </section>




    <!-- /.content -->

{% endblock %}




{% block script %}



    <!-- AdminLTE App -->
    <script src="static/dist/js/app.min.js"></script>
    <script src="static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="static/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script src="static/plugins/echarts/echarts.min.js"></script>




    <script type="text/javascript">

        $(document).ready(function () {
            $('#scan_result').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "ajax": "/total?task_id={{count_info['task_id']  }}"
            });
        });

        var ports_pie = echarts.init($("#ports_pie")[0]);
        var option = {

            tooltip: {
                trigger: 'item',
                formatter: "总数 : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left'
            },
            series: [
                {
                    type: 'pie',
                    data: {{ ports_pie |safe }}
                }
            ]
        };
        ports_pie.setOption(option);

        var service_pie = echarts.init($("#service_pie")[0]);
        var option = {

            tooltip: {
                trigger: 'item',
                formatter: "总数 : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left'
            },
            series: [
                {
                    center: ['60%', '50%'],
                    type: 'pie',
                    data: {{ service_pie |safe }}
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        service_pie.setOption(option);

    </script>

{% endblock %}